<template>
  <div class="map_box">
    <div id="map" class="chart_box"></div>
  </div>
</template>

<script setup lang="js">
import * as echarts from "echarts"

import gaLuTuJson from '../assets/map-json/ga-lu-tu.json'
import suLiDeJson from '../assets/map-json/su-li-de.json'
import tuKeJson from '../assets/map-json/tu-ke.json'
import wuDingHeJson from '../assets/map-json/wu-ding-he.json'
import wuLanTaoLeGaiJson from '../assets/map-json/wu-lan-tao-le-gai.json'
import wuShenZhaoJson from '../assets/map-json/wu-shen-zhao.json'


import { ref, reactive, watch, onMounted, toRef } from 'vue'

const props = defineProps({
  townName: String
})

const mapData = ref(null)

if (props.townName == '嘎鲁图镇') {
  mapData.value = gaLuTuJson
} else if (props.townName == '苏力德苏木乡') {
  mapData.value = suLiDeJson
} else if (props.townName == '图克镇') {
  mapData.value = tuKeJson
} else if (props.townName == '无定河镇') {
  mapData.value = wuDingHeJson
} else if (props.townName == '乌兰掏勒盖镇') {
  mapData.value = wuLanTaoLeGaiJson
} else if (props.townName == '乌审召镇') {
  mapData.value = wuShenZhaoJson
} 

let geoCoordMap = {};
let data = [];

let convertData = function (data) {
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};

let max = 6000,
  min = 10;
let maxSize4Pin = 100,
  minSize4Pin = 20;

const options = reactive({
  //backgroundColor: '#0F1C3C',
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      if (params.value.length > 1) {
        return params.data.name + "" + params.data.value[2];
      } else {
        return params.name;
      }
    },
  },
  geo: {
    map: "townmap",
    show: true,
    roam: false,
    label: {
    },
    layoutSize: "80%",
    itemStyle: {
      // borderColor: new echarts.graphic.LinearGradient(
      //   0,
      //   0,
      //   0,
      //   1,
      //   [
      //     {
      //       offset: 0,
      //       color: "#00F6FF",
      //     },
      //     {
      //       offset: 1,
      //       color: "#53D9FF",
      //     },
      //   ],
      //   false
      // ),
      borderWidth: 3,
      shadowColor: "#01A1A0",
      shadowOffsetY: 0,
      shadowBlur: 60,
    },
  },
  series: [
    {
      type: "map",
      map: "townmap",
      aspectScale: 0.75,
      label: {
        //调整数值
        position: "right",
        show: true,
        color: "#fff",
        fontSize: 14,
      },
      itemStyle: {
        //地图块颜色
        areaColor: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              // color: "#073684", // 0% 处的颜色
              color: '#007779'
            },
            {
              offset: 1,
              // color: "#061E3D", // 100% 处的颜色
              color: '#01A1A0'
            },
          ],
        },
        borderColor: "#fff",
        borderWidth: 1,
        //鼠标放置颜色加深
        emphasis: {
          label: {
            color: '#fff'
          },
          areaColor: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#01A1A0", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#007779", // 100% 处的颜色
              },
            ],
          },
        },
      },
      data: data,
    }
  ],
})

onMounted(() => {
  let map = echarts.init(document.getElementById("map"));
  echarts.registerMap('townmap', mapData.value) //注册
  map.setOption(options)
  // window.onresize = ping_tu.resize;
})
</script>

<style>
.map_box {
  width: 100% !important;
  height: 100% !important;
}

.chart_box {
  width: 100% !important;
  height: 100% !important;
}
</style>